<template>
  <div>
    <el-table :data="tableData" align=center >
      <el-table-column prop="time" label="添加日期" width="150">
      </el-table-column>
      <el-table-column label="添加信息">
        <el-table-column prop="adim" label="操作员" width="120">
        </el-table-column>
        <el-table-column label="图书信息">
          <el-table-column prop="title" label="书名" width="120">
          </el-table-column>
          <el-table-column prop="isbn" label="ISBN" width="135">
          </el-table-column>
          <el-table-column prop="num" label="库存" width="120">
          </el-table-column>
          <el-table-column prop="delivery" label="是否上架" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.delivery == false ? 'danger' : 'success'"
                :key="scope.row.id"
              >
                {{ scope.row.delivery == false ? "否" : "是" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="所属分类" width="100">
            <template slot-scope="scope">
              {{ scope.row.fenlei.label }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="130">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-button style="float: right; margin-top: 20px;margin-left: 20px;" type="primary" @click="submitForm" :loading="end">提交</el-button>
    <el-button style="float: right; margin-top: 20px;"  @click="handlePrev">上一步</el-button>
    
  </div>
</template>

<script>
import { add_book } from "@/api/book";
export default {
  props: {
    book: {
      type: Array,
      default: () => ({}),
    },
    active: {
      type: Number,
      default: 0,
    },
    fenlei: {
      type: String,
      default: () => ({}),
    },
  },
  data() {
    return {
      tableData: [],
      end: false,
    };
  },
  watch: {
    active(val) {
      if (val == 3) {
        //时间戳转换

        this.tableData = this.book;

        console.log(this.book);
        console.log(this.tableData);
        console.log(this.fenlei);
        this.tableData.forEach((item) => {
          this.$set(item, "fenlei", this.fenlei);
        });
        console.log(this.tableData);
      }
    },
  },
  methods: {
    handlePrev() {
      console.log("上一步");
      this.$emit("prevStep", this.tableData);
    },
    submitForm() {
      this.handleArr();
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.tableData.splice(index, 1);
      console.log(this.tableData);
    },
    //转化数组
    handleArr(index, row) {
         this.end = true;
      let ISBNs = this.book.map((book) => {
        return book.isbn;
      });
      let status = this.book.map((book) => {
        return book.delivery == false ? 0 : 1;
      });
      let inventory = this.book.map((book) => {
        return book.num;
      });
      //表单数据
      console.log(this.fenlei);
      let params = new URLSearchParams();
      params.set("ISBNs", ISBNs);
      params.set("status", status);
      params.set("inventory", inventory);
      params.set("categoriesId", this.fenlei.value);
      params.set("interfaceType", 1);
       
      add_book(params)
      
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.$emit("nextStep");
            this.end = false;
            this.$alert("将返回起始添加页面", "添加成功", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$router.go(0)
              },
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(ISBNs);
      console.log(status);
      console.log(inventory);
    },
  },
};
</script>
